import cloneDeep from 'lodash/cloneDeep'
import { user as userAPI } from '@/api'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
import { constantRoutes, asyncRoutes, anyRoute } from '@/router/routes'
import router from '@/router'

/**
 * 递归过滤异步路由表，返回符合用户菜单权限的路由表
 * @param asyncRoutes
 * @param routeNames
 */
function filterAsyncRoutes(asyncRoutes, routeNames) {
  // debugger
  // 过滤得到当前用户有权限的路由数组
  const accessedRoutes = asyncRoutes.filter(route => {
    // 遍历的route是否在当前用户的路由权限列表中
    if (routeNames.includes(route.name)) {
      //如果这个路由下面还有下一级的话,就递归调用
      if (route.children && route.children.length) {
        const cRoutes = filterAsyncRoutes(route.children, routeNames)
        //如果过滤一圈后,没有子元素了,这个父级菜单就也不显示了
        if (cRoutes && cRoutes.length > 0) {
          route.children = cRoutes
          return true
        }
        return false
      }
      return true
    }

    return false
  })

  return accessedRoutes
}

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',

    roles: [],
    buttons: [],
    routes: [], // 本用户所有的路由,包括了固定的路由和下面的addRouters
    asyncRoutes: [] // 本用户的角色赋予的新增的动态路由
  }
}

const state = getDefaultState()

const mutations = {
  SET_USER: (state, userInfo) => {
    state.name = userInfo.name // 用户名
    state.avatar = userInfo.avatar // 头像
    state.roles = userInfo.roles // 角色列表
    state.buttons = userInfo.buttons // 按钮权限列表 ['btn.User.add', 'btn.Attr.update']
  },

  SET_TOKEN(state, token) {
    state.token = token
  },

  RESET_USER(state) {
    Object.assign(state, getDefaultState())
  },

  SET_ROUTES: (state, asyncRoutes) => {
    // 保存异步路由
    // asyncRoutes 有过滤后的动态路由
    state.asyncRoutes = asyncRoutes
    // 合并常量路由,异步路由与备选路由, 并保存
    // routes 所有路由
    // 为了将来SideBar组件用来遍历生成左侧导航
    state.routes = constantRoutes.concat(asyncRoutes, anyRoute) //将固定路由和新增路由进行合并, 成为本用户最终的全部路由信息
    // 将当前用户的异步权限路由和备选路由添加到路由器
    // asyncRoutes.forEach(route => router.addRoute(route))
    // router.addRoute(anyRoute)
    // 一旦添加上，router中就有constantRoutes，asyncRoutes，anyRoute
    router.addRoutes([...asyncRoutes, anyRoute])
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      userAPI
        .login({ username, password })
        .then(result => {
          const { data } = result
          // vuex数据
          commit('SET_TOKEN', data.token)
          // cookie
          setToken(data.token)
          resolve()
        })
        .catch(error => {
          reject(error)
        })
    })
  },

  // get user info
  async getInfo({ commit, state }) {
    const { data } = await userAPI.getInfo()
    // 更新的用户信息 name
    commit('SET_USER', data)

    console.log('所有异步路由', asyncRoutes)
    console.log('用户拥有路由', data.routes) // ['User', 'Acl', 'Attr', 'trademark', ...]

    // debugger
    // 有问题: 切换admin登陆看到的还是上一个用户的菜单列表
    // 原因: 包含所有路由的数组中某个一层路由的children可能被过滤掉了部分
    // commit('SET_ROUTES', filterAsyncRoutes(asyncRoutes, data.routes))
    const routes = filterAsyncRoutes(cloneDeep(asyncRoutes), data.routes)
    // console.log(routes)
    commit('SET_ROUTES', routes)
  },

  /*
  重置用户信息
  */
  async resetUser({ commit, state }) {
    // 如果当前是登陆的, 请求退出登陆
    if (state.name) {
      await userAPI.logout()
    }
    // 删除cookie中保存的token
    removeToken()
    // 重置路由
    resetRouter()
    // 提交重置用户信息的mutation
    // 清空vuex的token和其他数据
    commit('RESET_USER')
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
